<template>
    <div style="width: 100vw;height: 10px;"></div>
    <div style="display: flex;flex-direction: row;">
        <div style="padding: 10px;background-color: transparent;width: 600px;">
            <el-tree default-expand-all
                style="max-width: 600px;height: 400px;background-color: transparent;border: 1px solid grey;border-radius: 10px;padding: 10px;"
                :data="data" :props="defaultProps" @node-click="handleNodeClick" />

        </div>
        <div style="flex: 1;padding: 10px;">
            <div
                style="height: 400px;background-color: transparent;border: 1px solid grey;border-radius: 10px;padding: 10px;justify-content: center;display: flex;">
                <!-- <div style="position:relative;left: 20px;top: 0px;">塔杋1#吊钩监控：</div> -->
                <div style="background-color: transparent;height: 400px;">
                    <!-- 第一行 -->
                    <div style="display: flex;flex-direction: row;padding-bottom: 20px;">
                        <!-- 分3列 -->
                        <div style="flex: 1;padding-top: 20px;font-weight: bold;">塔杋1#吊钩-监控：</div>
                        <div>
                            <el-icon :size="60" @click="handleTopClick" style="cursor: pointer;">
                                <Top />
                            </el-icon>
                        </div>
                        <div style="flex: 1;"></div>
                    </div>
                    <!-- 第二行 -->
                    <div style="display: flex;flex-direction: row;background-color: transparent;">
                        <!-- 分3列 -->
                        <div style="padding-top: 60px;width: 185px;padding-left: 40px;box-sizing: border-box;">
                            <el-icon :size="60" @click="handleLeftClick" style="cursor: pointer;">
                                <Back />
                            </el-icon>
                        </div>
                        <div @click="handleCenterClick"
                            style="cursor: pointer;border: 2px solid black;width:150px;height: 150px;border-radius: 50%;box-sizing: border-box;display: flex;justify-content: center;align-items: center;">
                            <el-icon :size="55">
                                <Microphone />
                            </el-icon>
                        </div>
                        <div style="flex: 1;"></div>
                        <div style="padding-top: 60px;width: 185px;padding-left: 60px;box-sizing: border-box;">
                            <el-icon :size="60" @click="handleRightClick" style="cursor: pointer;">
                                <Right />
                            </el-icon>
                        </div>
                    </div>
                    <div style="height: 50px;"></div>
                    <!-- 第三行 -->
                    <div style="display: flex;flex-direction: row;">
                        <div style="flex: 1;"></div>
                        <div>
                            <el-icon :size="60" @click="handleBottomClick" style="cursor: pointer;">
                                <Bottom />
                            </el-icon>
                        </div>
                        <div style="flex: 1;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div
        style="width: 100vw; padding: 10px;box-sizing: border-box;background-color: black;display: flex;flex-wrap: wrap;">
        <div class="item-jk" v-for="_item in 9">
            <div style="width: 100%;height: 100%;background-color: transparent;">
                <img src="../assets/jiankong.jpg" alt="监控图像" style="object-fit: fill;width: 100%;height: 100%;">
                <div style="float: left;position: relative;bottom: 46px;display: flex;padding: 5px 20px 5px 20px;background-color: grey;">
                    <el-icon :size="30" style="margin-left:0px;" color="red">
                        <VideoPause />
                    </el-icon>
                    <el-icon :size="30" style="margin-left: 20px;margin-right: 20px;" color="white">
                        <Camera />
                    </el-icon>
                    <el-icon :size="30" color="white">
                        <VideoCameraFilled />
                    </el-icon>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { Top, Back, Bottom, Right, Microphone, VideoPause, Camera, VideoCameraFilled } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
interface Tree {
    label: string
    children?: Tree[]
}

const handleNodeClick = (data: Tree) => {
    console.log(data)
}

const data: Tree[] = [
    {
        label: '出入口1',
        children: [
            { label: '塔杋1#吊钩' },
            { label: '出入口洗车' },
            { label: '南道向东' },
        ],
    },
    {
        label: '2号场地',
        children: [
            {
                label: '场地 2-1',
                children: [
                    {
                        label: '场地 2-1-1',
                    },
                ],
            },
            {
                label: '场地 2-2',
                children: [
                    {
                        label: '场地 2-2-1',
                    },
                ],
            },
        ],
    },
    {
        label: '场地 one 3',
        children: [
            {
                label: '场地 two 3-1',
                children: [
                    {
                        label: '场地 three 3-1-1',
                    },
                ],
            },
            {
                label: '场地 two 3-2',
                children: [
                    {
                        label: '场地 three 3-2-1',
                    },
                ],
            },
        ],
    },
]

const defaultProps = {
    children: 'children',
    label: 'label',
}
const handleCenterClick = () => {
    ElMessage.success("开始讲话");
}
const handleRightClick = () => {
    ElMessage.success("向右转");
}
const handleLeftClick = () => {
    ElMessage.success("向左转");
}
const handleTopClick = () => {
    ElMessage.success("向上转");
}
const handleBottomClick = () => {
    ElMessage.success("向下转");
}
</script>

<style scoped>
.item-jk {
    width: calc((100vw - 20px) / 3);
    height: calc((100vw - 20px) / 3 * 2 / 3);
    box-sizing: border-box;
    padding: 10px;
}
</style>